#{extends 'noTab.html' /} #{set title: 'Advanced Search' /}
<head>
<script type="text/javascript"
	src="@{'/public/javascripts/jquery.validate.js'}"></script>
<script type="text/javascript"
	src="@{'/public/javascripts/jquery.validate.min.js'}"></script>
<script type="text/javascript"
	src="/public/javascripts/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/token-input-facebook.css" />
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/token-input.css" />
<script type="text/javascript"
	src="@{'/public/javascripts/calendar-2.2.js'}"></script>

</head>

<link rel="stylesheet" type="text/css"
	href="@{'/public/stylesheets/jquery.autocomplete.css'}" />
<script type="text/javascript"
	src="@{'/public/javascripts/jquery.autocomplete.js'}"></script>
<script type="text/javascript">
	$(init);
	function checkDates(caller) {
		
			var end = document.getElementById("endDate").value.split("-");
			var start = document.getElementById("stDate").value.split("-");
			if (end.length == 3 && start.length == 3) {
				if (end[2] < start[2] || end[2] == start[2] && end[1] < start[1] 
				|| end[2] == start[2] && end[1] == start[1] && end[0] < start[0]){
				alert("Please enter start and end dates in a logical order ;)");
				caller.value = "";
				}
			}
	}
	function init() {
		/* $("#allLabel").onclick(function() {
			$("#allLabel").fadeOut();
		});
 */
 		
 		$.validator.addMethod("dateRegEx", function(value) {
			return value.trim() == "" || value.match( "^((((19|20)(([02468][048])|([13579][26]))-02-29))|((20[0-9][0-9])|(19[0-9][0-9]))-((((0[1-9])|(1[0-2]))-((0[1-9])|(1\\d)|(2[0-8])))|((((0[13578])|(1[02]))-31)|(((0[1,3-9])|(1[0-2]))-(29|30)))))$");
		});
	$("#advForm").validate({
		rules: {
			stDate: {
				dateRegEx: true,
			},
			endDate: {
				dateRegEx: true,
			}
		},
		messages: {
			stDate: {
				dateRegEx: "Please use the Date Format YYYY-MM-DD",
			},
			endDate: {
				dateRegEx: "Please use the Date Format YYYY-MM-DD",
			}
		}
	}); 
	}
	
	function uncheckAllBox(caller) {

		//$("#choose-all-locations").checked = false;
		//form = document.forms[0];
		//alert(caller.id);
		if (caller.id == "choose-all-locations") {
			document.getElementById("inIdeas").checked = true;
			document.getElementById("inTopics").checked = true;
			document.getElementById("inPlans").checked = true;
			document.getElementById("inEntities").checked = true;
			document.getElementById("inOrganizations").checked = true;
			document.getElementById("inIdeaContent").checked = false;
			document.getElementById("inTopicDescription").checked = false;
		}
			if (caller.id != "inTopicDescription"
					&& document.getElementById("inTopics").checked) {
				document.getElementById('inTopicDescription').checked = false;
			}
			if (caller.id != 'inIdeaContent'
					&& document.getElementById("inIdeas").checked) {
				document.getElementById('inIdeaContent').checked = false;
			}
			if (caller.id != "inTopics"
					&& document.getElementById('inTopicDescription').checked) {
				document.getElementById("inTopics").checked = false;
			}
			if (caller.id != "inIdeas"
					&& document.getElementById('inIdeaContent').checked) {
				document.getElementById("inIdeas").checked = false;
			}
		var allChecked = true;
		//alert($("#inIdeas").value + " , " + $("#inIdeas").name + " ," + $("#inIdeas").id);
		//alert($("#inTopics").checked);
		allChecked = document.getElementById("inIdeas").checked
				&& document.getElementById("inTopics").checked
				&& document.getElementById("inPlans").checked
				&& document.getElementById("inEntities").checked
				&& document.getElementById("inOrganizations").checked;
		//alert(allChecked);
		if (allChecked) {
			document.advForm.specifyLocation[0].checked = true;
			document.getElementById('inIdeaContent').checked = false;
			document.getElementById('inTopicDescription').checked = false;
		} else {
			document.advForm.specifyLocation[1].checked = true;
		}

		//alert(allChecked);
		//$("#choose-all-locations").checked = false;
		//$("#choose-specific-locations").checked = "checked";
		//form.radios[1].checked = true;
		//$("#srchLoc").fadeOut();
		//	if()
	}
</script>
<h1 class="viewTitle">Advanced Search..</h1>
<div class="viewContent">
	#{if isLoggedin}
	#{form @Browse.advancedSearchResults(), id:'advForm', name:'advForm' }
	<div class="formEntry">
		<div class="formLabel" style="width: 400px">
			<label for="all" id="allLabel" onclick="applyF();">with <b><i>ALL</i>
			</b> of the words</label>
		</div>
		<input type="text" name="all" id="all" class="inputText" /> <br />
	</div>
	<div class="formEntry">
		<div class="formLabel" style="width: 400px">
			<label for="exactPhrase">with the <b><i>EXACT</i> </b> phrase</label>
		</div>
		<input type="text" name="exactPhrase" id="exactPhrase"
			class="inputText" /> <br />
	</div>
	<div class="formEntry">
		<div class="formLabel" style="width: 400px">
			<label for="atleast">with <b><i>AT LEAST ONE</i> </b> of the
				words</label>
		</div>
		<input type="text" name="atleast" id="atleast" class="inputText" /> <br />
	</div>
	<div class="formEntry">
		<div class="formLabel" style="width: 400px">
			<label for="without"><b><i>WITHOUT</i> </b> the words</label>
		</div>
		<input type="text" name="without" id="without" class="inputText" /> <br />
	</div>
	<div class="formEntry">
		<div class="formLabel" style="width: 200px">
			<label for="tag">with the <b><i>TAG</i> </b> </label>
		</div>
		<input type="text" name="tag" id="tag" /> <br />
	</div>
	<div class="formEntry">
		<p>
		<div class="formLabel" style="width: 400px">
			<label for="stDate">Choose <b><i>START date</i> </b> for
				posting of results </label>
		</div>
		<input class="stDate" type="text" name="stDate" id="stDate"
			class="inputText" onchange="checkDates(this);"></input>
		<script type="text/javascript" charset="utf-8">
		$(".stDate").datepicker({
			dateFormat : 'yy-mm-dd',
			showAnim : 'fadeIn'
		})
	</script>
		<br />
		</p>
	</div>
	<div class="formEntry">
		<p>
		<div class="formLabel" style="width: 400px">
			<label for="endDate">Choose <b><i>END date</i> </b> for
				posting of results </label>
		</div>
		<input class="endDate" type="text" name="endDate" id="endDate"
			class="inputText" onchange="checkDates(this);"></input>
		<script type="text/javascript" charset="utf-8">
		$(".endDate").datepicker({
			dateFormat : 'yy-mm-dd',
			showAnim : 'fadeIn'
		})
	</script>
		<br />
		</p>
	</div>
	<br />
	<h2 id="srchLoc" align="left">Search Locations</h2>
	<br /> <input id="choose-all-locations" type="radio"
		name="specifyLocation" value="all" checked="checked"
		onclick="uncheckAllBox(this);" /> <label for="choose-all-locations"><font
		size="3">Search <b><i>ALL</i> </b> possible locations</font> </label> <br />
	<br />

	<div id="specificDiv">

		<input id="choose-specific-locations" type="radio"
			name="specifyLocation" value="specific" /> <label
			for="choose-specific-locations"><font size="3">Search
				in <b><i> Only</i> </b> the following Locations</font> </label> <br /> <br />
		<div style="left: 30px">
			<input id="inIdeas" type="checkbox" name="inIdeas"
				onchange="uncheckAllBox(this);" /> <label for="inIdeas">Search
				in Ideas</label><br />
			<div style="left: 30px">
				<input id="inIdeaContent" type="checkbox" name="inIdeaContent"
					onchange="uncheckAllBox(this);" /> <label for="inIdeaContent"><i>Search
						in Ideas <b>Content Only</b> </i> </label>
			</div>
			<input id="inTopics" type="checkbox" name="inTopics"
				onchange="uncheckAllBox(this);" /> <label for="inTopics">Search
				in Topics</label> <label style="width: 100px"></label><br />
			<div style="left: 30px">
				<input id="inTopicDescription" type="checkbox"
					name="inTopicDescription" onchange="uncheckAllBox(this);" /> <label
					for="inTopicDescription"><i>Search in Topic <b>Description
							Only</b> </i> </label>
			</div>
			<input id="inPlans" type="checkbox" name="inPlans"
				onchange="uncheckAllBox(this);" /> <label for="inPlans">Search
				in Plans</label> <br /> <input id="inEntities" type="checkbox"
				name="inEntities" onchange="uncheckAllBox(this);" /> <label
				for="inEntities">Search in Entities</label> <br /> <input
				id="inOrganizations" type="checkbox" name="inOrganizations"
				onchange="uncheckAllBox(this);" /> <label for="inOrganizations">Search
				in Organizations</label>
		</div>
	</div>
	<br /> <input type="submit" value="Search"
		style="font-style: oblique; font-size: 60 larger;">

	#{/form}
		#{/if}
	#{else}
	<h2>You need to be a logged-in user to use the Advanced Search option.</h2>
	#{/else}
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$("#tag").tokenInput("@{Browse.searchTag(q)}", {
			theme : "facebook"
		});
	});
</script>